<template>

  <div class="work-wrap">
    <!--招工-->
    <div class="work-list" v-for="(item,index) in itemList" :key="index" @click="openRecruit(item.id)">
      <div class="work-con">
        <img v-lazy="item.mechanismUrl" class="pic-box" v-if="item.mechanismUrl"/>
        <div class="pic-box" v-else></div>
        <div class="item-box">
          <div class="item-con">
            <span class="work-type">{{item.workTypeName}}</span>
            <span class="work-money" v-if="item.postType == 1">{{item.workMoney}}元/小时</span>
            <span class="work-money" v-if="item.postType == 0">{{item.wageRange}}元/月</span>
          </div>
          <div class="item-con">
            <span class="lend-money" v-if="item.lendType == 1">可借支</span>
            <div class="fee-box" v-if="item.reStatus == 1 && item.reMoney > 0">
              <span class="fee-title">返费</span>
              <span class="fee">{{item.reMoney}}元</span>
            </div>
          </div>

          <div class="item-con">
            <span class="company-name">{{item.mechanismName}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>


  export default {
    props: {
      itemList: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      openRecruit(id) {
        this.$emit("openRecruit", id);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assest/mixin";

  .work-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .who(100%, 2.44rem, hidden);
    background: @talent-bg-color;
    border-bottom: @talent-border-bottom;
    &:last-child {
      border-bottom: none;
    }
    .work-con {
      display: flex;
      padding-top: 0.32rem;
      .wh(93.6%, 1.8rem);
      padding-bottom: 0.347rem;
      .pic-box {
        margin-right: 0.267rem;
        .wh(2.4rem, 1.8rem);
        .border-radius(0.053rem);
        background: @talent-theme-bg-color;
      }
      .item-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        .item-con {
          display: flex;
          justify-content: space-between;
          &:first-child {
            padding-top: 0.053rem;
            padding-bottom: 0.16rem;
          }
          .work-type {
            .size-color-weight(0.4rem, rgba(51, 51, 51, 1), 500);
          }
          .work-money {
            .size-color-weight(0.4rem, rgba(255, 145, 38, 1), 500);
          }
          &:nth-child(2) {
            padding-bottom: 0.4rem;
          }
          .lend-money {
            .fj(center, center);
            .wh(1.12rem, 0.4rem);
            background: rgba(240, 246, 250, 1);
            .border-radius(0.053rem);
            .size-color(0.293rem, rgba(161, 171, 179, 1));
          }
          .company-name {
            .size-color(0.347rem, rgba(102, 102, 102, 1));
          }
          .fee-box {
            display: flex;
            margin-left: auto;
            .wh(1.787rem, 0.4rem);
            .fee-title {
              .wh(0.72rem, 0.4rem);
              background: rgba(77, 207, 190, 1);
              border-radius: 0.053rem 0rem 0rem 0.053rem;
              .size-color(0.293rem, rgba(255, 255, 255, 1));
              text-align: center;
              line-height: 0.4rem;
            }
            .fee {
              text-align: center;
              line-height: 0.347rem;
              .wh(1.147rem, 0.347rem);
              border: 0.027rem solid rgba(77, 207, 190, 1);
              border-radius: 0rem 0.053rem 0.053rem 0rem;
              .size-color-weight(0.293rem, rgba(77, 207, 190, 1), 500);
            }
          }
        }
      }
    }
    .apply-time {
      .fj(center, space-between);
      .wh(93.6%, 0.8rem);
      border-top: @talent-border-bottom;
      .size-color(0.32rem, rgba(153, 153, 153, 1));
    }
  }
</style>
